<div class="site-tree">
    <ul class="layui-nav layui-nav-tree">
        <li id="nav-user-manager" class="layui-nav-item layui-this">
            <a href="javascript:change(0);">
                <cite>用户列表</cite>
            </a>
        </li>
        <li id="nav-role-manager" class="layui-nav-item">
            <a href="javascript:change(1);">
                <cite>角色列表</cite>
            </a>
        </li>
    </ul>
</div>
<div class="site-content">
    {{template "../member_manager/UserList.html"}}
    {{template "../member_manager/RoleList.html"}}
    <!-- #include file = "../member_manager/UserList.html" -->
    <!-- #include file = "../member_manager/RoleList.html" -->
</div>
<script>
    var menuIdList = ["nav-user-manager", "nav-role-manager"];
    var contentIdList = ["userContainer", "roleContainer"];
//    var data = location.hash;
//    console.log(data);
//    var current_umTab = data[data.indexOf("umTab") + "umTab=".length];
//    console.log(data.indexOf("umTab") + "umTab=".length);

    setTimeout(function(){
        change(0);
    },200);

    function change(position) {
        var targetId = "";
        if (position == "0") {
            targetId = "nav-user-manager";
//            location.hash = data.replace("umTab=1", "umTab=0")
        } else if (position == "1") {
            targetId = "nav-role-manager";
//            location.hash = data.replace("umTab=0", "umTab=1")
        }

        for(var i = 0; i < menuIdList.length; i++) {
            if (targetId == menuIdList[i]) {
                var target_className = document.getElementById(targetId).className;
                if (target_className.indexOf("layui-this") < 0) {
                    target_className +=  " layui-this";
                    document.getElementById(targetId).className = target_className;
                }

                target_className = document.getElementById(contentIdList[i]).className;
                if (target_className.indexOf("show") < 0) {
                    target_className = "show";
                    document.getElementById(contentIdList[i]).className = target_className;
                }
            } else {
                var className = document.getElementById(menuIdList[i]).className;
                if (className.indexOf("layui-this") > 0) {
                    className = className.replace(" layui-this", "");
                    document.getElementById(menuIdList[i]).className = className;
                }

                className = document.getElementById(contentIdList[i]).className;
                if (className.indexOf("hide") < 0) {
                    className = "hide";
                    document.getElementById(contentIdList[i]).className = className;
                }
            }
        }
    }
</script>